<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #localVideo {
        width: 700px;
        height: 500px;
    }
</style>

<body>
    <video id="localVideo" autoplay playsinline muted></video>
    <script>
        // 2.屏幕共享
        function startScreem() {
            let isFront = false;
            let config = {
                audio: false, video: true, video: {
                    width: 700,
                    height: 500,
                    // 前后置摄像头
                    facingMode: isFront ? "user" : "environment",
                    // 帧率设置. 字面意思，一个是理想的状态下面，一个是最大的帧率
                    frameRate: { ideal: 30, max: 30 }
                },
            };
            let video = document.querySelector("video");
            function successCallback(stream) {
                // 将返回的流提供给控制台进行检查
                window.stream = stream;
                console.log(stream)
                if (window.URL) {
                    // Chrome浏览器
                    video.srcObject = stream;
                }
                // 播放
                video.play();
            }
            function errorCallback(error) {
                console.log("navigator.getUserMedia error: ", error);
            }
            // 传入3个参数，第一个是配置，第二个是成功的回调
            // navigator.mediaDevices.getDisplayMedia(config, successCallback, errorCallback);
            navigator.mediaDevices.getDisplayMedia(config)
                .then(function (stream) {
                    successCallback(stream)
                })
                .catch(function (err) {
                    errorCallback(err)
                });

        }
        // startScreem()
    </script>

    <script>
        // 屏幕录制和下载视频，结束时才能下载

        // 录制媒体流
        async function startRecord() {
            const kbps = 1024
            const Mbps = kbps * kbps
            let localStream = await navigator.mediaDevices.getDisplayMedia({
                audio: true,
                video: true,
            })
            let options = {
                audio: false, video: true, video: {
                    width: 700,
                    height: 500,
                    frameRate: { ideal: 30, max: 30 }
                },
            };
            const mediaRecorder = new MediaRecorder(localStream, options)
            mediaRecorder.start()
            mediaRecorder.onError = (e) => {
                console.log("报错原因："+e)
            }
            mediaRecorder.ondataavailable = (e) => {
                // 将录制的数据合并成一个 Blob 对象
                // 直接改成 mp4
                const blob = new Blob([e.data], { type: 'video/mp4' })
                window.blob = blob
            }

            // 该事件会在媒体录制结束时触发
            mediaRecorder.onstop = (e) => {
                // 停止录制
            }
        }

        // 下载 Blob
        function downloadBlob(blob) {
            const url = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = url
            a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
            a.click()
            // 释放 URL 地址
            URL.revokeObjectURL(url)
        }
        function downloadBlobButton() {
            blob =window.blob
            const url = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = url
            a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
            a.click()
            // 释放 URL 地址
            URL.revokeObjectURL(url)
        }

    </script>

    <button onclick="startRecord()">开始录制</button>
    <button onclick="downloadBlobButton()">下载blob</button>
</body>

</html>